<template>
<div class="page-top animated fadeInDown">
  <transition name="fade" mode="out-in">
  <!-- <span class="search-box" v-show="isShow">
    <input type="text" v-model="searchParam.param" class="input" placeholder="搜索..." maxlength="30" autocomplete="off">
    <i class="icon-search search" @click="query()"></i>
  </span> -->
  </transition>
  <div class="nav">
    <li>
      <router-link tag="a" to="/index">
        <span class="tab-link">首页</span>
      </router-link>
    </li>
    <li>
      <router-link tag="a" to="/rank">
        <span class="tab-link">排行</span>
      </router-link>
    </li>
    <li>
      <router-link tag="a" to="/category">
        <span class="tab-link">分类</span>
      </router-link>
    </li>
    <li>
      <a style="cursor:pointer" class="tab-link" @click="toggleShow()">搜索</a>
    </li>
  </div>
  <div class="information">
    <div v-if="user!=null">
      <div class="back_btn" v-if="user.type>2">
        <li><a @click="go('/pubcomics')" class="bt">发布漫画</a></li>
      </div>
      <el-dropdown size="small" placement="bottom" class="dropd">
        <div class="avatar">
          <img src="http://p24hjnsdi.bkt.clouddn.com/18-2-13/48061091.jpg">
        </div>
        <el-dropdown-menu style="top:50px" slot="dropdown">
         	<el-dropdown-item @click.native="go('/comic')" v-if="user.type>2">我的漫画</el-dropdown-item>
         	<el-dropdown-item @click.native="go('/favorite')">我的收藏</el-dropdown-item>
         	<el-dropdown-item @click.native="go('/comment')">我的评论</el-dropdown-item>
         	<el-dropdown-item @click.native="go('/userinfo')">账号设置</el-dropdown-item>
         	<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <router-link tag="a" to="/login" v-if="user === null">
      <span class="login">登录</span>
    </router-link>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
import {mapMutations, mapGetters} from 'vuex'
export default {
  data () {
    return {
      searchParam: {}
    }
  },
  methods: {
    ...mapMutations({
      setUser: 'SET_USER',
      setParam: 'SET_PARAM',
      setIsShow: 'SET_ISSHOW'
    }),
    toggleShow () {
      this.setIsShow(true)
      this.$router.push('/index')
    },
    // query () {
    //   if(this.searchParam.param !== undefined){
    //     this.setParam(this.searchParam.param)
    //     this.$router.push({ 
    //       path: '/index',
    //       query:{param: this.searchParam.param}
    //     })
    //   }
    // },
    go (path) {
      this.$router.push(path)
    },
    logout () {
      var _this = this;
		  this.$confirm('确认退出吗?', '提示', {type: 'warning'}).then(() => {
		    sessionStorage.removeItem('u')
        _this.setUser(null)
        _this.$router.push('/login')
      }).catch(() => {})
    }
  },
  created () {
    this.setUser(JSON.parse(sessionStorage.getItem('u')))
    // document.addEventListener('click', (e) => {
    //   if (!this.$el.contains(e.target)) {
    //     this.setIsShow(false)
    //   }
    // })
  },
  computed: {
    ...mapGetters([
      'user',
      'isShow'
    ])
  }
}
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
@import "~common/stylus/variable"
.page-top
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
  opacity 0.95
  width 100%
  position fixed
  right 0
  z-index 3
  background-color #fff
  height 60px
  .nav
    list-style none
    padding 20px 30px
    float left
    font-size $font-size-sm
    li
      position relative
      display initial
      padding-right 20px
    a
      color #5A5A5A
      text-decoration none
      font-size 15px
      -webkit-transition all .30s linear
      -moz-transition all .30s linear
      -o-transition all .30s linear
      -ms-transition all .30s linear
      transition all .30s linear
    a:hover
      color #fd113a
  .information
    float right
    right -9px
    padding-right 20px
    .login
      float right
      margin-top 20px
      right 2px
      font-size 13px
    .dropd
      .avatar
        float right
        margin-top 12px
        right 2px
        img
          width 32px
          height 32px
          border-radius 30px
    .back_btn
      float left
      padding-top 18px
      margin-right -10px
      -webkit-transition all .40s linear
      -moz-transition all .40s linear
      -o-transition all .40s linear
      -ms-transition all .40s linear
      transition all .40s linear
      cursor pointer
      li
        display initial
        padding-right 20px
    .back_btn:hover
      color #ff3860
  .search-box
    line-height 30px
    position absolute
    display inline-block
    width 60%
    margin-top: 14px
    left 20px
    max-width 100%
    height 30px
    padding 0
    border none
    z-index 11
    input
      font-size 14px
      line-height 30px
      position absolute
      top 0
      left 0
      width 100%
      height 30px
      padding 0 40px 0 18px
      border 1px solid #FFE1FF
      border-radius 20px
      outline 0
      color #6C7B8B
      background-color #fff
    input:hover
      border 1px solid #FFD1FF
    .search
      position relative
      margin 2px 0 0 3px
      float right
      color rgba(246, 71, 95, 0.4)
      font-size 22px
      right 12px
    .search:hover
      color $color-icon-mini

&.router-link-active
  .tab-link
    color red
    border-bottom 2px solid rgba(246, 71, 95,0.4)
    padding-bottom 18px
*, :after, :before
  -webkit-box-sizing border-box
  -moz-box-sizing border-box
  box-sizing border-box
@media screen and (max-width: 960px) {
  .page-top{
    width 100%
    }
}
.fade-enter-active, .fade-leave-active {
  transition opacity .6s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity 0
}
</style>
